<template>
  <view class="main">
    <view class="tabs">
      <view class="tab-wrapper" v-for="(tab,i) in tabs" :key="i" :class="{current:i == currentTab}"
            @click="handleTabClick(i)">
        <view class="tab">
          <view class="label">{{ tab }}</view>
        </view>
      </view>
    </view>

    <view class="wrapper">

      <view class="form">

        <view class="form-item">
          <view class="label">姓名</view>
          <input type="text" class="input" :value="wageModel.name"/>
        </view>

        <view class="form-item" v-if="currentTab == 0">
          <view class="label">开户行</view>
          <input type="text" class="input" :value="wageModel.bank"/>
        </view>


        <view class="form-item" v-if="currentTab == 0">
          <view class="label">账号</view>
          <input type="text" class="input" :value="wageModel.card"/>
        </view>

        <view class="form-item" v-else>
          <view class="label">收款码</view>
          <image class="image" :src="baseUrl+wageModel.qr"></image>
        </view>
      </view>


      <view class="money-wrapper">
        <view class="label">提现金额</view>

        <view class="input-wrapper">
          <view class="prefix">￥</view>
          <input type="number" class="input" placeholder="0.00" v-model="wage" :disabled="true"/>
        </view>
      </view>

      <view class="footer">
        <view class="left">
        </view>
        <view class="right" @click="handleRecordClick">提现记录</view>
      </view>

      <view class="btn" @click="submit">确认提现</view>

    </view>


    <my-dialog ref="dialog" content="提现成功" icon="cuIcon-check"/>

  </view>
</template>

<script>
import MyDialog from "@/components/dialog";
import {baseUrl} from "@/utils/request";
import Api from "@/utils/Api";

export default {
  name: "technician-withdrawal",
  components: {MyDialog},
  data() {
    return {
      baseUrl,
      currentTab: 0,
      tabs: ["银行卡", "支付宝", "微信"],
      userInfo: null,
      type: [3, 1, 2]
    }
  },
  computed: {
    wage: {
      get() {
        return this.userInfo ? this.userInfo.wage : 0;
      },
      set(val) {
        if (this.userInfo) this.userInfo.wage = val
      }
    },
    wageModel() {
      let name = '', card = '', bank = '', qr = ''
      if (this.userInfo) {
        if (this.currentTab == 0) {
          name = this.userInfo.bankName
          card = this.userInfo.bankCard
          bank = this.userInfo.bank
        } else if (this.currentTab == 1) {
          name = this.userInfo.alipayName
          qr = this.userInfo.alipayQr
        } else {
          name = this.userInfo.wxName
          qr = this.userInfo.wxQr
        }
      }
      return {name, card, bank, qr}
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);

    this.req.getUserInfoCheckMobile().then(res => {
      this.userInfo = res
    })
  },
  methods: {
    handleTabClick(i) {
      this.currentTab = i;
    },
    submit() {
      Api.withdraw(this.type[this.currentTab]).then(res=>{
        this.$refs.dialog.show().then(res=>{
          this.req.getUserInfoCheckMobile().then(res => {
            this.userInfo = res
          })
        });
      })
    },
    handleRecordClick() {
      uni.navigateTo({url: `/pages/index/my/technician/withdrawal/record/index`})
    },
  },
}
</script>

<style scoped lang='scss'>

.main {
  padding-bottom: env(safe-area-inset-bottom);
}

.tabs {
  background-color: white;
  display: flex;

  .tab-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: r(18px 0);


    &.current .tab {
      background-color: $primary-color;
      color: white;
    }

    .tab {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: r(50px);
      font-size: r(32px);
      width: r(186px);
      padding: r(5px 0);

      .icon {
        height: r(40px);
        width: r(60px);
      }
    }
  }
}

.wrapper {
  margin-top: r(24px);
  background-color: white;
  padding: r(30px);

  .form {
    //background: #FAFAFA;
    //box-shadow: r(0px 3px 7px 0px) rgba(0, 0, 0, 0.1);
    border-radius: r(20px);
    padding: r(20px 30px);

    .form-item {

      & + .form-item {
        margin-top: r(40px);
      }

      .label {
        color: #333;
      }

      .input {
        border-bottom: 1px solid #f2f2f2;
      }

      .image {
        width: r(200px);
        height: r(300px);
      }
    }

  }

  .money-wrapper {
    margin-top: r(72px);
    padding: r(30px);
    border-bottom: 1px solid #F0F0F0;

    .label {
      font-size: r(28px);
      color: #333333;
    }

    .input-wrapper {
      margin-top: r(20px);
      font-size: r(66px);
      color: #333333;
      display: flex;
      align-items: center;

      .input {
        height: r(88px);
        font-size: r(66px);
      }
    }
  }

  .footer {
    margin-top: r(30px);
    display: flex;
    justify-content: space-between;

    .left {
      font-size: r(26px);
      color: #333333;

      .light {
        color: #E73832;
        font-size: r(34px);
      }
    }

  }

}

.btn {
  height: r(96px);
  line-height: r(96px);
  font-size: r(36px);
  text-align: center;
  background-color: $primary-color;
  border-radius: r(10px);
  color: white;
  margin: r(50px 0);
}
</style>